<template>
  <div style="display: flex; justify-content: start; margin-bottom: 20px">
    <!--  条件查询-->
    <!--新增、删除、查询、重置查询-->
    <n-button-group>
      <n-button :ghost="true" color="#2080f0" @click="clickInsertBtn()">
        <template #icon>
          <n-icon>
            <AddCircleOutlineTwotone />
          </n-icon>
        </template>
        新增
      </n-button>
      <n-button :ghost="true" color="#2080f0" @click="deleteDepartment">
        <template #icon>
          <n-icon>
            <DeleteForeverOutlined />
          </n-icon>
        </template>
        删除
      </n-button>
      <n-button :ghost="true" color="#2080f0" @click="searchDepartmentStore">
        <template #icon>
          <n-icon>
            <ManageSearchFilled />
          </n-icon>
        </template>
        查询
      </n-button>
      <n-button :ghost="true" color="#2080f0" @click="resetDepartmentSearch()">
        <template #icon>
          <n-icon>
            <ManageSearchFilled />
          </n-icon>
        </template>
        重置查询
      </n-button>
    </n-button-group>
  </div>

  <department-insert-dialog
    v-model:show="departmentStore.departmentInsertDialogVisible"
  >
  </department-insert-dialog>

  <department-edit-dialog
    v-model:show="departmentStore.departmentEditDialogVisible"
  >
  </department-edit-dialog>

  <department-search-dialog
    v-model:show="departmentStore.departmentSearchDialogVisible"
  >
  </department-search-dialog>

  <n-data-table
    :columns="columns"
    :data="departmentStore.departmentList"
    :row-key="(row) => row.id"
    v-model:checked-row-keys="checkedRowKeys"
    :loading="departmentTableLoading"
    :scroll-x="computedScrollX(columns)"
  ></n-data-table>
</template>

<script lang="ts" setup>
import {
  AddCircleOutlineTwotone,
  DeleteForeverOutlined,
  ManageSearchFilled,
} from "@vicons/material";
import {
  Department,
  DepartmentSearchCondition,
  useDepartmentStore,
} from "@/store/modules/data-dictionary/department";
import { deleteDepartmentById } from "@/api/data-dictionary/department";
import DepartmentInsertDialog from "@/views/data-dictionary/department/DepartmentInsertDialog.vue";
import DepartmentEditDialog from "@/views/data-dictionary/department/DepartmentEditDialog.vue";
import DepartmentSearchDialog from "@/views/data-dictionary/department/DepartmentSearchDialog.vue";
import { computedScrollX } from "@/utils/computed/TableComputed";
import { NButton } from "naive-ui";

const columns = ref([
  {
    title: "勾选框",
    key: "selection",
    width: 40,
    type: "selection",
    fixed: "left",
  },
  {
    title: "序号",
    key: "key",
    width: 60,
    render: (_: never, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "部门编号",
    width: 130,
    key: "departmentNo",
    ellipsis: {
      tooltip: true,
    },
    align: "center",
  },
  {
    title: "部门名称",
    width: 130,
    key: "departmentName",
    ellipsis: {
      tooltip: true,
    },
    align: "center",
  },
  {
    title: "编辑",
    key: "edit",
    width: "80",
    fixed: "right",
    render(row: Department) {
      return h(
        NButton,
        {
          strong: true,
          onClick: () => {
            departmentStore.setDepartmentSelectedRow(row);
            departmentStore.openDepartmentEditDialog();
          },
        },
        { default: () => "编辑" }
      );
    },
  },
]);

const departmentStore = useDepartmentStore();

const departmentTableLoading = ref(false);

const getDepartmentDataList = () => {
  try {
    departmentTableLoading.value = true;
    departmentStore.setDepartmentList({
      id: null,
      departmentName: null,
      departmentNo: null,
    } as Department);
  } catch (e) {
    message.error("查询失败!");
  } finally {
    departmentTableLoading.value = false;
  }
};
getDepartmentDataList();

//新增
const clickInsertBtn = () => {
  departmentStore.openDepartmentInsertDialog();
};

//查询
const searchDepartmentStore = () => {
  departmentStore.openDepartmentSearchDialog();
};

//删除
const dialog = useDialog();
const message = useMessage();
const checkedRowKeys = ref([]);
const deleteDepartment = () => {
  dialog.warning({
    title: "提示",
    content:
      "确定删除选中的" +
      checkedRowKeys.value.length +
      "条数据警告！删除后无法恢复！",
    positiveText: "确定",
    onPositiveClick: () => {
      deleteDepartmentById(checkedRowKeys.value)
        .then(() => {
          message.success("删除成功!");
          departmentStore.setDepartmentList({});
        })
        .catch(() => {
          message.error("系统错误, 请联系管理员");
        });
    },
    negativeText: "取消",
    maskClosable: false,
    closable: false,
  });
};

//重置查询
const searchForm = ref({} as DepartmentSearchCondition);
const resetDepartmentSearch = () => {
  searchForm.value = {} as DepartmentSearchCondition;
  departmentStore.setDepartmentList({});
};
</script>

<style scoped></style>
